<template>
  <div class="personalCenter">
    <el-container>
      <el-container>
        <el-aside width="100%">
          <el-col :span="18">
            <div class="demo-basic--circle">
              <div class="block">
                <span>个人中心</span>
              </div>
            </div>
          </el-col>
          <el-input
            v-model="name"
            type="text"
            placeholder="用户昵称"
            show-word-limit
          ></el-input>
          <el-input
            v-model="email"
            type="text"
            disabled
            placeholder="用户邮箱/登录名"
            show-word-limit
          ></el-input>
          <el-input
            v-model="password"
            placeholder="用户密码"
            show-password
          ></el-input>
          <el-input v-model="email" placeholder="邮箱">
            <template slot="append">@qq.com</template>
          </el-input>

          <el-button-group style="float: right; padding: 3px 0" type="text">
            <el-button type="success" size="medium" @click="submit" round
              >保存</el-button
            >
          </el-button-group>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "UserHome",
  data() {
    return {
      id: window.sessionStorage.getItem("user"),
      name: "",
      email: "",
      password: "",
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    async getUser() {
      const { data: res } = await this.$http.get(`/api/user/${this.id}`);
      if (res.status !== 200) return this.$message.error("获取用户信息失败");
      this.name = res.obj.name;
      this.password = res.obj.password;
      this.email = res.obj.email;
    },
    async submit() {
      const { data: res } = await this.$http.put(`/api/user/`, {
        id: this.id,
        name: this.name,
        password: this.password,
        email: this.email,
      });
      if (res.status !== 200) return this.$message.error("获取用户信息失败");
      this.$message.success(res.msg)
    },
  },
  mounted() {
    this.getUser();
  },
};
</script>

<style scoped>
.el-header {
  line-height: 60px;
  text-align: center;
  background-color: #b3c0d1;
}
.el-aside {
  line-height: 44px;
  text-align: center;
  padding: 50px 200px;
  /* background-color: #c4e9c7; */
  background-image: url("../../assets/img/banner.jpg");
  background-size: 100%;
}
.el-main {
  line-height: 36px;
  text-align: center;
  background-color: #e9eef3;
}

.demo-basic--circle {
  align: "center";
  margin-top: 30px;
  margin-left: 150px;
}
.block {
  margin-left: 25px;
  font-weight: bold;
  font-size: 25px;
  color: #fff;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 1368px;
  border-radius: 30px;
}
</style>